<script setup lang="ts">
import {onMounted, ref, onBeforeMount} from "vue";
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";

// 用tm代替t，因为tm是响应式的而且可以解析对象
const {locale, setLocale, tm} = useI18n()


const online_list1 = ref([
    {
      id: "1",
      title: '指定分账时机',
      subTitle: "您可灵活选择分账节点，提高资金效率。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/flexible-icon-time.f7200657.svg'
    },
    { 
      id: "2",
      title: '减少换汇环节',
      subTitle: "结算前分账让款项直达参与方，避免多次换汇，减少汇兑损失。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/flexible-icon-reduce.55c6962c.svg'
    },
    { 
      id: "3",
      title: '多种接收账户类型',
      subTitle: "覆盖支付宝、银行卡、万里汇账户等，最大化满足参与方的收款需求。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/flexible-icon-type.f9d48895.svg'
    }
 ])


 const carousel_Images = computed(() => {
  return [
    {
        headImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*04dJTI7z8MQAAAAAAAAAAAAADmesAQ/fmt.webp',
        subImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*idPyQ64Xye4AAAAAAAAAAAAADmesAQ/fmt.webp'
    }
  ]
})


/**
 * 屏幕尺寸
 */
const screenSize = ref({width: 0, height: 0});


// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};



onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();

  new Player({
    id: "mse", //元素id
    lang: "zh", //设置中文
    volume: 0, // 默认静音
    autoplay: true, //自动播放
    screenShot: false, // 开启截图功能
    loop: true,
    fullscreen: true,
    //视频地址
    url: 'https://gw.alipayobjects.com/v/huamei_7wyo78/afts/video/A*qo1zQ5lZ0T8AAAAAAAAAAAAADmesAQ',

    //封面图
    poster:
        'https://gw.alipayobjects.com/v/huamei_pwpjvv/afts/video/A*mmKcQYn-jykAAAAAAAAAAAAADmesAQ',
    fluid: true, // 填满屏幕 （流式布局）
    playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
  });

})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

</script>

<template>
  <v-app>
    <!-- 主图-->
     <banner-main
      themeColor="black"
      :lists_bottom="online_list1"
      :lists="carousel_Images" 
      title="收单分账" 
      subTitle="支持收单资金直接分账到平台参与方账户。无论是佣金、补贴、运费还是货款，我们帮您把每一笔钱高效、灵活、安全地进行分账打款。"
     ></banner-main>
     <div class="font-semibold text-3xl text-center mt-40 mb-40">合理的分账时机结合多币种能力，提升资金效率</div>
      <div  class="d-flex justify-between align-center w-6/12 mx-auto ">
        <div class="d-flex flex-column justify-center align-center">
          <div>
            <span class="relative font-medium text-[68px] text-[#2a3a52]">20<i class="absolute top-[0] right-[-24px] text-[24px]">种</i></span>
          </div>
          <span class="text-[#98a6bb] text-[24px]">货币跨境结算</span>
        </div>
        <div class="d-flex flex-column justify-center align-center">
          <div>
            <span class="relative font-medium text-[68px] text-[#2a3a52]">13<i class="absolute top-[0] right-[-24px] text-[24px]">种</i></span>
          </div>
          <span class="text-[#98a6bb] text-[24px]">货币本地结算</span>
        </div>
        <div class="d-flex flex-column justify-center align-center">
          <div>
            <span class="relative font-medium text-[68px] text-[#2a3a52]">10<i class="absolute top-[0] right-[-24px] text-[24px]">种</i></span>
          </div>
          <span class="text-[#98a6bb] text-[24px]">货币全球结算</span>
        </div>
      </div>
      <div class="w-9/12 mx-auto">
          <div id="mse"></div>
      </div>

    <footer-other></footer-other>

  </v-app>

</template>

<style scoped>
    :deep(.xgplayer-controls.controls-autohide) {
        display: none;
    }
    :deep(video) {
        width: 100%;
        height: 100%;
        object-fit: fill; /* 或者使用 contain，根据需求选择 */
    }
</style>